<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>隐心进程管理器-对象列表</title>
    <script src="./jquery-1.12.4.min.js"></script>
    <script src="./layer/layer.js"></script>
	<script src="./eejs-api.min.js"></script>
    <style>
        html, body {
            width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden;-webkit-user-select: none;
        }
        .top {
            width: 100%; height: calc(100% - 24px); overflow: auto;
        }
        .process-table {
            width: 100%; height: 100%; font-size: 12px; background-color: #e5e5e5;
        }
        .process-table th {
            height: 23px; font-size: 13px;text-align: left; padding: 1px 5px; word-break: keep-all; white-space: nowrap;
            font-weight: 500; text-shadow: 1px 1px 1px #bdbdbd; color: #000000;background-color: #f5f5f5;
        }
        .process-table td {
            height: 21px; padding: 1px 5px; text-align: left; word-break: keep-all; white-space: nowrap; cursor: default;
        }
        .process-table .dtr {
            background-color: #ffffff; color: #3c3c3c; text-shadow: 1px 1px 1px #e0e0e0;
        }
        .child-table tr {
            background-color: #fffed3; color: #3c3c3c; text-shadow: 1px 1px 1px #e0e0e0;
        }
        .process-table tr.dtr:hover {
            background-color: #fff45c; color: #0e0a44; text-shadow: 1px 1px 1px #cecece;
        }
        .process-table tr.dtr.active {
            background-color: #00cf0a !important; color: #ffffff !important;  text-shadow: 1px 1px 1px #005a24 !important;
        }
        .process-table tr.htr.active {
            background-color: #ffee95; color: #ffffff; text-shadow: 1px 1px 1px #e4c033;
        }

        .process-table tr.dtr.open {
            background-color: #d0d0d0; color: #000000; text-shadow: 1px 1px 1px #868686;
        }
        .process-table th.sort {
            cursor: pointer;
        }
        .process-table th.sort:hover {
            background-color: #FFEB3B;
        }
        .process-table .coltd {
            padding: 5px;
        }
        .bottom {
            height: 23px; font-size: 12px; line-height: 20px; border-top: 1px solid #c3c3c3;cursor: default;
        }
        .bottom > div {
            float: left; padding: 0 10px; height: 20px; margin-top:2px;  border-right: 1px solid #dddddd;cursor: default;
        }        
        .child-table {
            width: 100%; height: 100%; font-size: 12px; background-color: #cfded2;
        }
        .hidden {
            display: none;
        }
        .process-table .itd{background-color: #ffffff !important;}
        .clone-table {
            position: fixed; z-index: 2; top: 0px; left: 0;background-color: #dddddd;width: 100%;
        }
        .clone th {
            height: 23px; font-size: 13px; text-align: left; word-break: keep-all;  white-space: nowrap; font-weight: 500;
            background-color: #f3f3f3; text-shadow: 1px 1px 1px #bdbdbd; color: #000000;cursor: default;
        }
		.fdiv span {
			float: right;
			margin-top: -1px;
		}
        #data-body {position: relative;}
        .selectdiv {position: absolute; float:left; border: 1px dotted #0c8f63;background: rgba(126, 230, 143, 0.3);}

		#contentmenu {
			position: absolute; 
			width: 160px;
			padding: 5px 2px; 
			background: #ffffff;
			border: 1px solid #f0f0f0; 
			box-shadow: 2px 2px 4px 1px #b9b9b9;
			top: 10px;
			left: 10px; 
			border-radius: 3px;
		}
		.mitem {
			width: calc(100% - 22px); 
			height: 25px; 
			border: 1px solid #ffffff; 
			border-radius: 3px; 
			font-size: 13px; 
			line-height: 27px; 
			padding: 0 10px; 
			cursor: pointer; 
			float: left; 
			color: #5c6073
		}
		.mitem:hover {color: #0b99e6; border: 1px solid #d1dde8;}
		.msplit {
			width: 100%;
			height: 2px;
			margin-top: 2px;
			float: left;
			border-top: 1px solid #e6e6e6;
		}
		.mitem.disable {color: #d6d6d6;cursor: default;}
    </style>
</head>
<body>
	<div id="contentmenu" class="hidden">
		<div class="mitem close">关闭对象</div>
		<div class="mitem copyhwnd">复制“对象句柄”</div>
		<div class="mitem copyname">复制“对象名称”</div>
		<div class="msplit"></div>
		<div class="mitem search">搜索对象</div>
		<div class="mitem flush">刷新列表</div>
	</div>
    <div class="top">
        <table id="process_table" class="process-table" cellspacing="1" cellpadding="0">
            <thead title="点击可排序"><!--↑↓-->
                <th>索引</th>
                <th class="sort" data-id="0">对象句柄 <span>&nbsp;</span></th>
                <th class="sort" data-id="1">对象名称 <span>&nbsp;</span></th>
            </thead>
            <tbody id="data-body">
    
            </tbody>
        </table>
    </div>    
    <div class="bottom">
        <div class="threadnum">对象数：<span>0</span></div>
        <div class="cpuuse">所属进程ID：<span></span></div>
        <div class="memoryuse">所属进程名称：<span></span></div>
		<div class="fdiv"><label><input type="checkbox" id="filter" /> <span>过滤空名称</span></label></div>
    </div>
    <script>
        var sIndex = -1;
        var orderType = -1;
        var orderWay = 1;
		var currPid = 0;
		var filterEmpty = false;

        function render(){
            $('#data-body').html('');
            var tpl = document.getElementById('tr.tpl').innerHTML;
            var htmls = [];
            for(var i = 0; i < data.length; i++){
				if(filterEmpty && !data[i].name){
					continue;
				}
                data[i]['index'] = i;
                data[i]['order'] = i + 1;
                try{
                    data[i].name = ee.utils.unicode4ToAnsi(data[i].name);
                }catch(ex1){
                    data[i].name = decodeURIComponent(unescape(data[i].name));
                }
                htmls.push(parse(tpl, data[i]));
            }
            $('#data-body').html(htmls.join(''));
        }
        
        function parse(tpl, param){
            return tpl.replace(/\{[a-zA-Z0-9]+\}/g, function(a, b){
                return param[a.replace(/[\{\}]+/g, "")];
            });
        }
        
        function setObjectData(arr, isf){
            if(arr){
                try{
                    if(arr && arr.length){
                        $('.threadnum span').text(arr.length);
                        data = arr;
						
                        if(orderType != -1){
                            order(orderType, orderWay);
                        } else {
                            render();
                        }
						if(isf){
							layer.msg('对象数据已更新');
						}
                    }
                }catch(e){
                    alert('error：' + e);
                }                
            }
        }

        function setPInfo(pid, pname){
            $('.cpuuse span').text(pid);
            $('.memoryuse span').text(pname);
        }

        function pageLoaded(){
            setTimeout(loadObjectList, 200)
        }

		function loadObjectList(flag){
			ee.processAllObject({"pid": currPid}, function(r){
				if(r.list){
					setObjectData(r.list, flag);
				}
			});
		}

        function showSearch(){
			if($('.layui-layer').length){
				return;
			}
            layer.prompt({title: '输入对象信息（支持模糊匹配），并确认', formType: 0}, function(str, index){				
                layer.close(index);    
				searchData(str);
            });
        }

		function compare(str1, str2){
			if(str1 == str2){
				return true;
			}
			if(!str1 || !str2){
				return str1 == str2;
			}
			str3 = str1.toLowerCase();
			str4 = str2.toLowerCase();
			return str3.indexOf(str4) != -1;
		}

		function searchData(str){
            for(var i = 0; i < data.length; i++){
				if(data[i].hwnd == str || compare(data[i].name, str)){
					$('.dtr').removeClass('active');
					$('.dtr.row' + i).addClass('active');
					$('.top').scrollTop(24 * i);
					return;
				}
			}
			layer.msg('对象不存在');
        }

        function order(index, o){            
            data.sort(function(a, b){
                if(index == 0){
                    return o > 0 ? a.name.localeCompare(b.name, 'zh-CN') : b.name.localeCompare(a.name, 'zh-CN');
                } else if(index == 1){
                    return parseInt(a.hwnd) < parseInt(b.hwnd) ? o : -o;
                }
                return 0;
            });

            render();
        }

        function closeResult(okstr, nostr){
            if(okstr && okstr.length){
                $('.dtr').each(function(){
                    var hwnd = $(this).data('hwnd') + ',';
                    if(okstr.indexOf(hwnd) != -1){
                        $(this).remove();
                    }
                });
            }
            if(nostr && nostr.length){
                nostr = nostr.substring(0, nostr.length - 1);
                layer.open({
                    type: 1 //Page层类型
                    ,area: ['300px', '200px']
                    ,title: '操作提示'
                    ,content: '如下句柄对象关闭失败：' + nostr
                });    
  
            }
        }

		function showObjectMenu(x, y, processId, parentId, name, winHwnd){
			//contentmenu
			var $menu = $('#contentmenu');
			var h = $menu.height();
			var maxh = $('body').height();
			$menu.css({"left": x, "top": y + h > maxh ? y - h - 13 : y}).removeClass('hidden');
		}

        window.onload = function(){
            var winWidth = $(window).width();
            var $body = $('#data-body');
            var px = -1;

			var searchurl = document.location.search.substring(1);
			var arr = searchurl.split('&');
			currPid = arr[0].replace('pid=', '');
			var name = arr[1].replace('name=', '');

			setPInfo(currPid, decodeURIComponent(name));

			pageLoaded();

            $body.on('mousedown', '.dtr', function(e){
                var that = $(this);
				$('#contentmenu').addClass('hidden');
                if(e.button == 2){ // 鼠标右键         
                    if(!that.hasClass('active')){
                        $('.dtr').removeClass('active');
                        that.addClass('active');
                    } 
                } else if(e.button == 0){
                    if(e.ctrlKey){
                        if(that.hasClass('active')){
                            that.removeClass('active');
                        } else {
                            that.addClass('active');
                        }
                        px = that.data('index');
                    } else {
                        if(e.shiftKey){
                            if(px < 0){                                
                                if(that.hasClass('active')){
                                    that.removeClass('active');
                                } else {
                                    that.addClass('active');
                                }
                            } else {
                                var x = that.data('index');
                                if(x < px){
                                    px--;
                                    var t = x;
                                    x = px;
                                    px = t;
                                } else {
                                    px++;
                                }
                                for(var i = px; i <= x; i++){
                                    var dtr = $('.dtr.row' + i);                            
                                    dtr.addClass('active');
                                }
                                px = -1;
                            }
                        } else {
                            px = that.data('index');
                            $('.dtr').removeClass('active');
                            if(that.hasClass('active')){
                                that.removeClass('active');
                            } else {
                                that.addClass('active');
                            }
                        }                        
                    }                    
                }
            });

            $body.on('mouseup', '.dtr', function(e){
                if(e.button == 2){ // 鼠标右键   
                    var arr = [];
                    $('.dtr.active').each(function(){
                        arr.push($(this).data('hwnd'));
                    });
                    setTimeout(function(){
                        showObjectMenu(e.clientX, e.clientY, arr.join(','));
                    }, 100);
                }
            });

            $('th.sort').on('click', function(){
                var that = $(this);
                var od = parseInt(that.data('id'));                
                $('.sort span').text('');
                if(that.hasClass('sort-down')){
                    $('.sort').removeClass('sort-up').removeClass('sort-down');
                    that.addClass('sort-up');
                    that.find('span').text('↑');                   
                    orderType = od;
                    orderWay = -1;
                } else {
                    $('.sort').removeClass('sort-up').removeClass('sort-down');
                    that.addClass('sort-down');
                    that.find('span').text('↓');
                    orderType = od;
                    orderWay = 1;
                }
                order(orderType, orderWay);
                resizeTh();
            });
            
            $('.top').scroll(function(){
                var topx = $('.top').scrollTop();
                var leftx = $('.top').scrollLeft();
                if(topx > 25){
                    if(!$('.clone-table').length){
                        var $thead = $('#process_table thead');
                        var $table = $('<table id="clone_table" class="clone-table" cellspacing="1" cellpadding="0"></table>');                        
                        $('.top').append($table.append($thead .clone().addClass('clone')));
                        $('.clone th').removeClass('sort');
                        $('.clone th span').text(' ');
                        $('.clone').css({width: $thead.width() + 'px', height: $thead.height() + 'px'})
                        $('.clone th').each(function(i, e){
                            if(i < 2){
                                $(this).css({
                                    "width": $('#process_table thead th:eq('+ i +')').width(),
                                    "min-width": $('#process_table thead th:eq('+ i +')').width(),
                                });                                
                            }    
                            $(this).css('padding', '1px 5px');                        
                        });
                    }
                    $('.clone-table').show();
                } else {                    
                    $('.clone-table').hide();
                }

                if(leftx > 0){
                    $('.clone-table').css({
                        left: (-leftx) + 'px',
                        width: 'calc(100% + ' + leftx + 'px)'
                    });                    
                } else {
                    $('.clone-table').css({
                        left: '0px',
                        width: '100%'
                    });
                }
            });

            $(window).on('resize', function(e){
                var newWidth = $(window).width();
                if(winWidth != newWidth){
                    winWidth = newWidth;
                    resizeTh();
                }
            });

			$('body').on('keyup', '.layui-layer-input', function(e){
                if(e.keyCode == 13){
                    if(!$(this).val()){
                        return;
                    }
                    layer.closeAll();
                    searchData($(this).val());
                }
            });

			$('#filter').on('click', function(){
				var c = $('#filter').is(':checked');
				if(c != filterEmpty){
					filterEmpty = c;
					render();
				}
			});

			$('.mitem').on('click', function(){
				var that = $(this);
				if(!that.hasClass('disable')){
					if(that.hasClass('close')){
						ee.dialogOpenAlert({"title": "警告", "tips": "您确定要结束此进程吗？", "button": 1, "timeout": 5000}, function(ret){
							if(ret.index == 0){
								$('.dtr.active').each(function(){
									var hwnd = $(this).data('hwnd');
									ee.processCloseObject({"pid": currPid, "hwnd": hwnd});
								});
								loadObjectList(true);
							}
						});						
					} else if(that.hasClass('copyhwnd')){
						var str = "";
						$('.dtr.active').each(function(){
							str += $(this).data('hwnd') + "\n";
						});
						ee.clipboardSetText({"text": str}, function(r){
							r.status && layer.msg('复制成功');
						});
					} else if(that.hasClass('copyname')){
						var str = "";
						$('.dtr.active').each(function(){
							str += $(this).data('name') + "\n";
						});
						ee.clipboardSetText({"text": str}, function(r){
							r.status && layer.msg('复制成功');
						});
					} if(that.hasClass('search')){
						showSearch();					
					} else if(that.hasClass('flush')){
						loadObjectList(true);
					}
					$('#contentmenu').addClass('hidden');
				}
			});
        }

        function resizeTh(){
            var $thead = $('#process_table thead');
            $('.clone').css({width: $thead.width() + 'px', height: $thead.height() + 'px'})
            $('.clone th').each(function(i, e){
                if(i < 2){
                    $(this).css({
						"width": $('#process_table thead th:eq('+ i +')').width(),
						"min-width": $('#process_table thead th:eq('+ i +')').width(),
					}); 
                }    
                $(this).css('padding', '1px 5px');                        
            });
        }
    </script>

    <script id="tr.tpl" type="text/html">
        <tr class="dtr row{index}" data-hwnd="{hwnd}" data-name="{name}" data-index="{index}">
            <td>{order}</td>                   
            <td>{hwnd}</td>
            <td>{name}</td>
        </tr>
    </script>

</body>
</html>